<template>
  <!-- 新建物料单 -->
  <HeaderNavTabarVue   :title="title" />
  <view class="material" :style="'min-height: ' + boxHeight + 'rpx;'">
    <view class="main">
      <view class="main-content-row">
        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left isrequired">测量人员</text>
            <view class="info-list-right">
              <view class="info-content">
                {{ materialData?.businessSurveyorName }}
              </view>
              <!-- <i class="iconfont icon-youjiantou"></i> -->
            </view>
          </view>
        </view>
        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left isrequired">测量日期</text>
            <view class="info-list-right">
              <view class="info-content">
                {{ materialData.surveyDate }}
              </view>
              <!-- <i class="iconfont icon-youjiantou"></i> -->
            </view>
          </view>
        </view>
      </view>

      <view class="main-content-row main-content-row-center">
        <MyPicker
          @getVlaue="getVlaue"
          ref="customerPickerRef"
          popupTitle="请选择客户名称"
        >
          <view class="picker-content" @tap="toggle">
            <view class="measurement-info-list">
              <text class="info-list-left isrequired">客户名称</text>
              <view class="info-list-right">
                <view v-if="materialData.customerName" class="uni-input">{{ materialData.customerName }}</view>
								<view class="uni-inputs" v-else>请选择</view>
                <i class="iconfont icon-youjiantou"></i>
              </view>
            </view>
          </view>
        </MyPicker>

        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left isrequired">终端门店</text>
            <view class="info-list-right">
              <view class="info-content">
                <input
                  adjust-position
                  type="text"
                  class="uni-input placeholder-right"
									placeholder="请输入"
                  v-model="materialData.terminalName"
                />
              </view>
            </view>
          </view>
        </view>
        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left isrequired">终端地址</text>
            <view class="info-list-right">
              <input
                adjust-position
                type="text"
                class="uni-input placeholder-right"
								placeholder="请输入"
                v-model="materialData.detailedAddress"
              />
            </view>
          </view>
        </view>
        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left isrequired">终端电话</text>
            <view class="info-list-right">
              <input
                adjust-position
                type="number"
                class="uni-input placeholder-right"
								placeholder="请输入"
                v-model="materialData.terminalPhone"
              />
            </view>
          </view>
        </view>
        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left isrequired">设计元素</text>
            <view class="info-list-right">
              <view class="info-content">
                <input
                  adjust-position
                  type="text"
                  class="uni-input placeholder-right"
									placeholder="请输入"
                  v-model="materialData.designElements"
                />
              </view>
            </view>
          </view>
        </view>

        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left isrequired">厂家负责人</text>
            <view class="info-list-right">
              <view class="info-content">
                <input
                  adjust-position
                  type="text"
                  class="uni-input placeholder-right"
									placeholder="请输入"
                  v-model="materialData.manufacturerContact"
                />
              </view>
            </view>
          </view>
        </view>

        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left">门店备注</text>
            <view class="info-list-right">
              <input
                adjust-position
                type="text"
                class="uni-input placeholder-right"
								placeholder="请输入"
                v-model="materialData.terminalRemark"
              />
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="floor">
      <button class="go-material-info" @tap="goMaterialInfo">
        <p>下一步</p>
        <text>填写材料信息</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref, reactive } from 'vue'
import store from '@/store'
import { getTitleBarHeight } from '@/utils/system.js'
import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'
import MyPicker from '@/components/MyPicker/MyPicker.vue'
import { getDate } from '@/utils/getDate.js'
import { getUserProfile } from '@/api/system/user.js'
import { getWorkApi } from '@/api/customer.js'

const customerPickerRef = ref(null) // 这个时候获取了子组件 Comp

const title = '新建物料单 - 客户信息'
// 页面内容高度
const boxHeight =
  (uni.getSystemInfoSync().windowHeight - getTitleBarHeight()) * 2

let userInfo = ref(null)
let materialData = reactive({
  businessSurveyor: '',
  businessSurveyorName: '',
  businessSurveyorList: [], // 测量人员
  surveyDate: getDate(), // 测量日期
  customerId: '', // 客户ID
  customerName: '', // 客户名称
  terminalName: '', // 终端门店
  detailedAddress: '', // 终端地址
  terminalPhone: '', // 终端电话
  designElements: '', // 设计元素
  manufacturerContact: '', // 厂家负责人
  terminalRemark: '', // 门店备注
})

// 打开模态床
const toggle = () => {
  customerPickerRef.value.toggle('bottom') // 调用子组件的 show 方法
}
// 客户信息
let customerList = ref([])
// 获取客户下拉菜单数据
const getWorkApiData = async (v = '') => {
  let params = {
    customerName: v,
  }
  let { code, data } = await getWorkApi(params)
  if (code == 200) {
    data.forEach((v) => {
      // customerList.value.push({
      //   label:  v.primaryClassification+'/'+ v.customerName,
      //   value: v.customerId,
      // })
			// 过滤掉 null
			customerList.value.push({
			  label:  [v.primaryClassification,v.customerName].filter(item => item != null).join('/'),
			  value: v.customerId,
			})
    })
    store.commit('setCustomerList', customerList.value)
  }
}

// 选择的客户数据
const getVlaue = (v) => {
  materialData.customerId = v.value
  materialData.customerName = v.label
  customerPickerRef.value.closePop()
}

let reg_tel =
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
const jiaoyan = (fn) => {
  let obj = {
    businessSurveyor: '',
    businessSurveyorName: '',
    // businessSurveyorList: [], // 测量人员
    surveyDate: getDate(), // 测量日期
    customerId: '', // 客户ID
    customerName: '', // 客户名称
    terminalName: '', // 终端门店
    detailedAddress: '', // 终端地址
    terminalPhone: '', // 终端电话
    designElements: '', // 设计元素
    manufacturerContact: '', // 厂家负责人
    // terminalRemark: "", // 门店备注
  }
  let nameTypeEL = []

  for (let key in obj) {
    if (materialData[key] == '') {
      nameTypeEL.push(key)
    }
  }

  if (nameTypeEL.length == 0) {
    if (!reg_tel.test(materialData.terminalPhone)) {
      uni.showToast({
        title: '手机号码格式错误！',
        icon: 'none',
      })
    } else {
      fn()
    }
  } else {
    uni.showToast({
      title: '请输入完整数据',
      icon: 'error',
    })
  }
}

const bindDateChange = (e) => {
  materialData.surveyDate = e.detail.value
}
const goMaterialInfo = () => {
  const fn = () => {
    uni.navigateTo({
      url:
        '/pages/material/business/business?materialData=' +
        encodeURIComponent(JSON.stringify(materialData)),
    })
  }
  jiaoyan(fn)
}

const getUserProfileFn = async () => {
  let { code, data } = await getUserProfile()
  if (code == 200) {
    userInfo.value = data
    materialData.businessSurveyor = new String(userInfo.value.userId)
    materialData.businessSurveyorName = userInfo.value.nickName
  }
}
onLoad(() => {
  getWorkApiData()
  getUserProfileFn()
})
</script>

<style lang="scss" scoped>
@import '/static/style/index.scss';
.uni-inputs {
  color: #86909c !important;
}

.material {
  padding: $spacing-row-base;
  box-sizing: border-box;
  // @include main-area-bgColor;
  background-color: $uni-bai;
  overflow-y: auto;

  :deep(.uni-input-input) {
    text-align: right;
  }

  .main {
    .main-content-row-center {
      margin: $spacing-col-base 0;
    }

    .main-content-row {
      // @include background-color;
      background-color: $uni-bg-lin;
      border-radius: 16rpx;

      .measurement-info-list {
        @include flex($align: center, $justify: space-between);
        padding: $spacing-row-base;

        .info-list-left {
          // @include font-color-auxiliary;
          color: $uni-fc-fu-lin;
          font-size: $font-size-base;
        }

        .info-list-right {
          @include flex($align: center);

          .info-content {
            @include textStyleBase;
            font-size: 34rpx;
          }

          .iconfont {
            margin-left: 16rpx;
            // @include font-color-auxiliary;
            color: $uni-fc-fu-lin;
          }
        }

        .unit {
          // @include font-color-auxiliary;
          color: $uni-fc-fu-lin;
        }
      }
    }

    .main-content-bottom {
      margin-top: $spacing-col-base;
    }
  }

  .floor {
    width: 100%;
    @include flex($align: cneter, $justify: center);
    margin-top: 40rpx;

    button {
      width: 335rpx;
      height: 104rpx;
      @include flex($align: center, $flex-column: column);
      line-height: normal;
      padding: 14rpx 0;
      box-sizing: border-box;

      p {
        font-size: 30rpx;
      }

      text {
        font-size: 24rpx;
      }
    }

    .go-material-info {
      background-color: $btn-bg-color;
      margin: 0;
      width: 100%;

      p {
        color: $text-color-white;
      }

      text {
        color: $text-btn-color;
      }
    }
  }
}
</style>
